<!DOCTYPE html>
<!--
Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
  <meta charset="utf-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <title>Max Pay</title>
</head>
<body>
  <button onclick="confirm()">confirm</button>
  <button onclick="cancel()">cancel</button>
  <button onclick="fail()">fail</button>
  <div>Messages:</div>
  <pre id="log"></pre>
</body>

<script>
let window_client_ready = false;

/**
 * Insert a message to the widget called 'log'.
 * @param {string} text - the text that is intended to be inserted
 * into the log.
 */
function updateLogView(text) {
  const messageElement = document.getElementById('log');
  messageElement.innerText = text + '\n' + messageElement.innerText;
}

function confirm() {
  navigator.serviceWorker.controller.postMessage('confirm');
  updateLogView('confirm is invoked.');
  return 'confirmed';
}

function fail() {
  navigator.serviceWorker.controller.postMessage('fail');
  updateLogView('fail is invoked.');
  return 'failed';
}

function cancel() {
  navigator.serviceWorker.controller.postMessage('cancel');
  updateLogView('cancel is invoked.');
  return 'canceled';
}

function isWindowClientReady() {
  return window_client_ready;
}

window.onload = function() {
  navigator.serviceWorker.controller.postMessage('app_is_ready');
  updateLogView('app is ready.');
}

navigator.serviceWorker.addEventListener('message', (evt) => {
  if (!evt.data) {
    updateLogView('Received an empty message');
    return;
  }

  if (evt.data === 'window_client_ready') {
    window_client_ready = true;
  }
  updateLogView(evt.data);
});
</script>
